<template>
  <!-- 在售楼盘详情-->
  <div class="box">
    <heads></heads>
    <div class="tit">
      <div class="list">
        <div class="li" style="cursor: pointer;" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <!-- <div>二手房</div>
        <div>新房</div>
        <div style="color:#64b6a8;">新房</div>
        <div class="sousuo">
          <input type="text" placeholder="请输入区域小区名称开始找房" />
          <p class="el-icon-search"></p>
        </div> -->
      </div>
    </div>
    <div class="particulars">
      <div class="name pointer" @click="goCompany">
        {{ storey.title }}
      </div>
      <div class="jubao" @click="jubaoClick">
        <img src="../../assets/ju.png" />
        <p>举报</p>
      </div>
      <div class="tu">
        <div class="datu">
          <img class="img" style="cursor: pointer;" :src="$img + imgs.img" @click="bldetails(imgs.id)" />
          <img class="shangb" v-if="storey.isOpen == 1" src="../../assets/zai.png" />
          <img class="shangb" v-if="storey.isOpen == 0" src="../../assets/wei.png" />
          <div class="zuo el-icon-arrow-left" @click="cutImg(0)"></div>
          <div class="you el-icon-arrow-right" @click="cutImg(1)"></div>
        </div>
        <!-- <div class="datu" v-else>
					<video controls autoplay muted width="600" height="400"
						:src="$img+storey.showVideo"></video>
				</div> -->
        <!-- <div class="xiaotu" @click="tuXuanClick(1)">
					<video style="object-fit:cover;" width="180" height="120"
						:src="$img+storey.showVideo"></video>
          <p :class="tuXuan == 1?'tuXuan':''">视频</p>
					<img style="width: 35px;height: 35px;position: relative;top: -80px;left: 70px;"
						src="../../assets/bf.png" />
        </div> -->
        <!-- <div class="xiaotu" @click="tuXuanClick(2)">
          <img :src="$img+imgs" />
          <p :class="tuXuan == 2?'tuXuan':''">图片</p>
        </div> -->
        <!-- <div class="xiaotu" @click="tuXuanClick(3)">
          <img src="../../assets/4.jpg" />
          <p :class="tuXuan == 3?'tuXuan':''">户型</p>
        </div> -->
      </div>
      <div class="wenz">
        <div class="qian" style="display: flex;align-items: center;justify-content: space-between;">
          <div>参考均价</div>
          <div class="p" style="width:153px;margin-left: 10px;white-space: nowrap;flex-grow: 1;">
            {{
              isNaN(storey.averagePrice)
              ? storey.averagePrice
              : storey.averagePrice + "元/㎡"
            }}
          </div>
          <collect :type="5" :bid="$route.query.id" style="margin-right: 10px;"></collect>
        </div>
        <div class="diz">
          <div>
            <span>开盘时间：{{ storey.starTime }}</span>
          </div>
          <div>
            <span>地址：{{ storey.address }}</span>
          </div>
          <div style="margin-bottom: 0px;">交房时间：{{ storey.giveTime }}</div>
        </div>
        <div class="mingpai">
          <div>
            <!-- <img src="../../assets/logo.png" />
            <span>叶梦梵</span> -->
            <span class="biaoqin">{{ storey.title }}</span>
          </div>
        </div>
        <div class="but">
          <div class="but_2" @click="chat(true)">
            <img src="../../assets/weixin_b.png" alt />
            <p>在线聊天</p>
          </div>
          <div class="but_1" @click="phoneGet">
            <img src="../../assets/dianhua_lan.png" alt />
            <p>{{ phonestate ? storey.shopPhone : "拨打电话" }}</p>
          </div>
        </div>
      </div>
      <div class="leibie">
        <div :class="leibieXuan == 1 ? 'xuan' : ''" @click="leibieClick(1)">
          基础信息
        </div>
        <div :class="leibieXuan == 2 ? 'xuan' : ''" @click="leibieClick(2)">
          户型介绍
        </div>
        <!-- <div :class="leibieXuan == 3?'xuan':''" @click="leibieClick(3)">经纪人</div> -->
        <div :class="leibieXuan == 6 ? 'xuan' : ''" @click="leibieClick(6)">
          预售许可
        </div>
        <div :class="leibieXuan == 7 ? 'xuan' : ''" @click="leibieClick(7)">
          销售信息
        </div>
        <div :class="leibieXuan == 8 ? 'xuan' : ''" @click="leibieClick(8)" v-if="recruitData.length > 0">
          在招职位
        </div>
        <div :class="leibieXuan == 4 ? 'xuan' : ''" @click="leibieClick(4)">
          帮友圈
        </div>
        <!-- <div :class="leibieXuan == 5?'xuan':''" @click="leibieClick(5)">在售房源</div> -->
      </div>
      <div v-if="leibieXuan == 8">
        <div style="margin: 24px auto; margin-bottom: 32px; max-width: 1200px">
          <invite-item :item="item" v-for="(item, i) in recruitData" :key="item.id" line></invite-item>

          <div v-if="recruitDataTotal == 0">
            <el-empty description="还没有发布在招职位呢"></el-empty>
          </div>
        </div>
      </div>
      <div v-if="leibieXuan == 1" style="margin-bottom:10px">
        <div class="xinxi">
          <div class="fangyuan">楼盘信息</div>
          <div class="guig">
            <p>
              <span style="color:#999999;">开盘时间：</span>
              <span>{{ storey.starTime }}</span>
            </p>
            <p>
              <span style="color:#999999;">交房时间：</span>
              <span>{{ storey.giveTime }}</span>
            </p>
            <p>
              <span style="color:#999999;">起价：</span>
              <span>{{ storey.starPrice + "元/㎡" }}</span>
            </p>
          </div>
          <div class="guig">
            <p>
              <span style="color:#999999;">均价：</span>
              <span>{{
                isNaN(storey.averagePrice)
                ? storey.averagePrice
                : storey.averagePrice + "元/㎡"
              }}</span>
            </p>
            <p>
              <span style="color:#999999;">规划户数：</span>
              <span>{{ storey.householdsNum }}户</span>
            </p>
            <p>
              <span style="color:#999999;">规划车位：</span>
              <span>{{ storey.vehiclesNum }}个</span>
            </p>
          </div>
          <div class="guig">
            <p>
              <span style="color:#999999;">规划楼座数：</span>
              <span>{{ storey.buildingsNum }}栋</span>
            </p>
            <p>
              <span style="color:#999999;">物业费：</span>
              <span>{{ storey.propertyFee }}元/㎡/月</span>
            </p>
            <p>
              <span style="color:#999999;">建筑类型：</span>
              <span>{{ storey.erectType }}</span>
            </p>
          </div>
          <div class="guig">
            <p>
              <span style="color:#999999;">容积率：</span>
              <span>{{ storey.plotRatio }}%</span>
            </p>
            <p>
              <span style="color:#999999;">产权年限：</span>
              <span>{{ storey.years }}</span>
            </p>
            <p>
              <span style="color:#999999;">建筑面积：</span>
              <span>{{ storey.floorage }}㎡</span>
            </p>
          </div>
          <div class="guig">
            <p>
              <span style="color:#999999;">占地面积：</span>
              <span>{{ storey.areaCovered }}㎡</span>
            </p>
            <p>
              <span style="color:#999999;">绿化率：</span>
              <span>{{ storey.greenRate }}%</span>
            </p>
          </div>
          <div class="guig">
            <p>
              <span style="color:#999999;">投资商：</span>
              <span>{{ storey.investor }}</span>
            </p>
          </div>
          <div class="guig">
            <p>
              <span style="color:#999999;">物业公司：</span>
              <span>{{ storey.propertyCompany }}</span>
            </p>
          </div>
          <div class="guig">
            <p>
              <span style="color:#999999;">楼盘位置：</span>
              <span>{{ storey.address }}</span>
            </p>
          </div>
        </div>

        <div class="jieshao">
          <div class="jies">楼盘介绍</div>
          <div class="li">{{ storey.remarks }}</div>
        </div>
        <div id="containepic" key="map" style="width: 1200px;height: 400px;"></div>
        <!-- v-show="leibieXuan == 1" -->
      </div>
      <div v-if="leibieXuan == 2" style="margin-bottom:10px">
        <div class="titLiat">
          <div @click="titClick(item.num)" :class="xuanzhong == item.num ? 'li cur' : 'li'" v-for="item in typelist"
            :key="item.num">
            <p>{{ item.name }}</p>
            <img v-if="item.num == xuanzhong" src="../../assets/xuanzhong.png" />
          </div>
        </div>
        <div class="list2" v-if="HouseTypeList.length > 0">
          <div class="li" v-for="(item, index) in HouseTypeList" :key="index">
            <img :src="($img + item.image).split('|')[0]" @click.stop="previewImg(item)" />
            <div class="wenzi" style="cursor: pointer;">
              <p class="p1">{{ item.title }}</p>
              <p class="p2">建筑面积：{{ item.floorage }}㎡</p>
              <p class="p3">户型类别：{{ item.houseType }}</p>
              <p class="p4">约{{ item.price }}万</p>
            </div>
          </div>
        </div>
        <div class="fenye" v-if="HouseTypeList.length > 0">
          <el-pagination background layout="prev, pager, next" :page-size="HouseTypePage.pageSize" :total="HouseTypeTotal"
            :current-change="HouseTypePage.pageNo" @current-change="currentHouseType"></el-pagination>
        </div>
        <el-empty description="暂无数据" v-if="HouseTypeList.length == 0"></el-empty>
      </div>
      <div v-if="leibieXuan == 3" style="margin-bottom:10px">
        <div class="list3" v-if="AgentInfoList.length > 0">
          <div class="li" v-for="(item, index) in AgentInfoList" :key="index">
            <img class="touxiang" :src="$img + item.userImage" @click="toAgent(item.userId)" />
            <div class="name" @click="toAgent(item.userId)">
              {{ item.userName }}
            </div>
            <div class="pingfen" @click="toAgent(item.userId)">
              <div>评分</div>
              <img v-for="(item1, index) in Number(item.scoreAvg)" :key="index" src="../../assets/xin_liang.png" />
              <img v-for="(item1, index) in 5 - item.scoreAvg" :key="index" src="../../assets/xin_hui.png" />
            </div>
            <div class="weigui " @click="showWeigui(item.userId)">
              <div class="wei">
                <span>违规次数</span>
                <span>></span>
                <span style=" color:red;font-weight: 600;font-size: 20px;">{{
                  item.violation ? item.violation : 0
                }}</span>
              </div>
              <img style="margin-left: 20px;" @click="chat(false, item)" src="../../assets/xiaoxi_lan.png" />
              <el-tooltip class="item" effect="dark" :content="item.userPhone" placement="top-start">
                <img src="../../assets/dianhua_lan.png" />
              </el-tooltip>
            </div>
            <div class="xian"></div>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :page-size="AgentInfoPage.pageSize"
              :total="AgentInfoTotal" :current-change="AgentInfoPage.pageNo"
              @current-change="currentAgentInfo"></el-pagination>
          </div>
        </div>
        <el-empty description="暂无数据" v-if="AgentInfoList.length == 0"></el-empty>
      </div>
      <div v-if="leibieXuan == 4" style="margin-bottom:10px">
        <div class="list4" v-if="TalesPromotionList.length > 0">
          <!-- <div class="li" style="cursor: pointer;" v-for="(item,index) in TalesPromotionList" :key="index" @click="bldetails(item.id)">
            <img class="img" :src="$img+item.image" />
            <div class="wenzi">
              <p class="p1">{{item.title}}</p>
              <p class="p6">
                <span>{{item.buildingsTitle}}</span>
                <span>{{item.create_date}}</span>
              </p>
            </div>
          </div> -->
          <bbczFriendCircleItem :wrapWidth="1200" :item="item" :key="item.id" :i="i"
            v-for="(item, i) in TalesPromotionList" @reData="getTalesPromotion()"></bbczFriendCircleItem>
        </div>
        <el-empty description="暂无数据" v-if="TalesPromotionList.length == 0"></el-empty>
      </div>
      <div v-if="leibieXuan == 5" style="margin-bottom:10px">
        <div class="list5" v-if="HousesSaleList.length > 0">
          <div class="li" v-for="(item, index) in HousesSaleList" :key="index">
            <img class="biao" :src="$img + item.house_image" style="object-fit: contain;background-color: #00000033;"
              @click="details(item)" />
            <div class="name">
              <div class="t_1" style="cursor: pointer;" @click="details(item)">
                {{ item.title }}
              </div>
              <div class="t_2">
                <span style="margin-right: 5px">{{ item.region }}</span>
                <span>{{ item.address }}</span>
              </div>
              <div class="t_3">
                <span style="margin-right: 16px">{{ item.house_type }}</span>
                <span style="margin-right: 16px">{{ item.AREA }}㎡</span>
                <span>{{ item.FLOOR }}</span>
              </div>
              <div class="t_4">
                <img :src="item.image" />
                <span>{{ item.nikeName || "未命名用户" }}</span>
                <!-- <div style="cursor: pointer;" @click="shopdetails(item.shop_id)">{{item.shop_name}}</div> -->
              </div>
            </div>
            <div class="qian">
              <p class="p1">{{ item.price }}万</p>
              <p class="p2">
                均价：{{ ((item.price * 10000) / item.AREA).toFixed(2) }}元/㎡
              </p>
            </div>
          </div>
        </div>
        <el-empty description="暂无数据" v-if="HousesSaleList.length == 0"></el-empty>
      </div>
      <div v-if="leibieXuan == 6" style="margin-bottom:10px">
        <div class="xuke">
          <div class="jies">预售许可</div>
          <div class="list" v-for="(item, index) in preSalePermitData" :key="index">
            <div class="li">预售证号：{{ item.presaleNo }}</div>
            <div class="li">发证时间：{{ item.issuingTime }}</div>
            <div class="li">绑定楼号：{{ item.boundBuilding }}</div>
          </div>
          <el-empty description="暂无数据" v-if="preSalePermitData.length == 0"></el-empty>
        </div>
      </div>
      <div v-if="leibieXuan == 7" style="margin-bottom:10px">
        <!-- 销售信息 -->
        <div class="salesMessage">
          <div class="title">销售信息</div>
          <div class="xian_x"></div>
          <div class="salesData" @click="information">
            <div class="list">
              <div>销售楼栋：共{{ buildingsNumbers }}栋</div>
              <div>销售户型：{{ houseTypeNum }}种户型</div>
            </div>
            <img class="rightImg" src="https://pic.bangbangtongcheng.com/static/you.png" />
          </div>
        </div>
      </div>
      <!-- <div id="containepic" v-show="leibieXuan == 1" style="width: 1200px;height: 400px;"></div> -->

      <p class="mzsm">
        {{ disclaimerContent }}
        免责声明：帮帮同城旨在为广大用户提供更丰富的信息，但由于部分信息因时间、政策变化等因素，且信息审核会有滞后性，会导致部分信息更新不同步，与实际情况可能存在偏差，一切信息以发布方官宣为准。帮帮同城不对您交易过程中对本网站信息产生的依赖承担任何明示或默示的担保责任或任何责任。
      </p>
    </div>
    <report ref="report" :bUserId="storey.userId"></report>
    <chat ref="chats"></chat>
    <inform ref="inform" :bUserId="bUserId"></inform>
    <floor></floor>

    <!-- 模态框 -->
    <div class="modalBox" v-if="modalBox" @click.self="motai">
      <div class="informations">
        <div class="top">
          楼栋信息 <span class="tuichu" @click="tuichu">X</span>
        </div>
        <div class="content">
          <el-carousel class="swiper list" :interval="5000" arrow="always" @change="qiehuan">
            <el-carousel-item v-for="(item, index) in list" :key="index">
              <div class="li">
                <div class="hao">{{ item.building_num }}号楼</div>
                <p>
                  <span style="color:#999">开盘：</span>
                  <span>{{ item.opening_time }}</span>
                </p>
                <p>
                  <span style="color:#999">交房：</span>
                  <span>{{ item.delivery_time }}</span>
                </p>
                <p>
                  <span style="color:#999">单元：</span>
                  <span>{{ item.unit_number }}个</span>
                </p>
                <p>
                  <span style="color:#999">层数：</span>
                  <span>{{ item.layer_number }}层</span>
                </p>
                <p>
                  <span style="color:#999">户数：</span>
                  <span>{{ item.houses_number }}户</span>
                </p>
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="huxing">
            <p class="name">关联户型</p>
            <div class="list" style="height:250px">
              <div class="lis" v-for="(item, index) in huList" style="width:auto" :key="index">
                <img :src="item.image.split('|')[0]" />
                <div class="wenzi">
                  <p class="p1">{{ item.title }}</p>
                  <p class="p2">建筑面积：{{ item.floorage }}㎡</p>
                  <p class="p2">户型类别：{{ item.house_type }}</p>
                  <p class="p1 p3">约{{ item.price }}万元</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import report from "../../components/report.vue";
import collect from "../../components/collect.vue";
import chat from "../../components/chat.vue";
import inform from "./inform";
import bbczFriendCircleItem from "./comp/bbcz-friend-circle-item";
import inviteItem from "@/views/invite/comp/item";

export default {
  components: {
    floor,
    heads,
    report,
    collect,
    chat,
    inform,
    bbczFriendCircleItem,
    inviteItem
  },
  data() {
    return {
      imgs: "",
      imgList: [],
      thisImg: 0,
      img: "",
      tuXuan: 2,
      leibieXuan: 1,
      xuanzhong: 0,
      typelist: [{ num: "", name: "全部" }],
      storey: {},
      house: {},
      phonestate: false,
      //户型信息
      HouseTypePage: {
        pageNo: 1,
        pageSize: 8,
        auditStatus: "2"
      },
      HouseTypeList: [],
      HouseTypeTotal: 0,
      //经纪人信息
      AgentInfoPage: {
        pageNo: 1,
        pageSize: 8,
        dutyStatus: "1",
        status: "1"
      },
      AgentInfoList: [],
      AgentInfoTotal: 0,
      //楼盘资讯
      TalesPromotionPage: {
        pageNo: 1,
        pageSize: 3,
        auditStatus: "2",
        type: 1
      },
      TalesPromotionList: [],
      TalesPromotionTotal: 0,
      //楼盘在售房源
      HousesSalePage: {
        pageNo: 1,
        pageSize: 3,
        examineStatus: "2",
        upStatus: "1",
        isLZ: "0"
      },
      HousesSaleList: [],
      HousesSaleTotal: 0,
      user: {},
      loginstate: false,
      bUserId: "",
      // 楼栋
      buildingsNumbers: 0,
      // 户型
      houseTypeNum: 0,
      // 模态框
      modalBox: false,
      //楼栋详细信息
      list: [],
      huList: [],
      typeLiat: [],
      preSalePermitData: [],
      carouselpage: {
        pageNo: 1,
        pageSize: 999,
        buildingsId: "",
        type: 2,
        auditStatus: "2"
      },
      businessType: "",
      recruitData: '',
      recruitDataTotal: "",
    };
  },
  created() {
    this.init();
    //回到顶部
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    scrollBy(0, -top);

    this.getDisclaimers(3);
  },
  mounted() {
    this.getType();
  },
  methods: {
    goCompany() {
      if (this.storey && this.storey.userId) {
        this.$getHttp("/api/mobile/public/getCompanyInformationByUserId", {
          userId: this.storey.userId,
        }).then((res) => {
          if (res.userCompanyInformation) {
            this.openUrlb('/invite/company', {
              userId: this.storey.userId
            })
          }
        })
      }
    },
    previewImg(item) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: 0,
        imgList: item.image.split('|').filter(Boolean),
      });
    },
    // 楼盘轮播
    getTalesIssued() {
      this.$getHttp("/mob/user/getTalesPromotion", this.carouselpage).then(
        data => {
          if (data.code == 200) {
            if (data.list.length != 0) {
              let img = [];
              data.list.forEach(v => {
                img.push({ id: v.id, img: v.image });
              });
              this.imgList = img;
              this.imgs = img[0];
            }
          }
        }
      );
    },
    // 获取预售许可
    // preSalePermit(id){
    //   this.$getHttp("/mob/home/querySellingLicense",{
    //     buildingsId:id,
    //     auditStatus:1
    //   }).then((data) => {
    //     if (data.code == 200) {
    //       this.preSalePermitData=data.sellingLicense
    //       console.log(this.preSalePermitData,'许可');
    //     }
    //   });
    // },
    async init() {
      this.getUser();
      await this.getBuildingsDetail(this.$route.query.id);
      this.getRecruit();

      this.saveUserCollection(this.$route.query.id);


      // this.preSalePermit(this.$route.query.id)
    },

    initMap() {
      var that = this;
      var center = new qq.maps.LatLng(
        that.storey.latitude,
        that.storey.longitude
      );
      var map = new qq.maps.Map(document.getElementById("containepic"), {
        center: center,
        zoom: 13,
        disableDefaultUI: true
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map
      });
      //that.markersArray.push(marker);
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
      } else {
        this.loginstate = false;
      }
    },
    //楼盘详情
    getBuildingsDetail(id) {
      return this.$getHttp("/mob/user/getBuildingsDetail", {
        id: id
      }).then(data => {
        if (data.code == 200) {
          // if (data.buildingsInfo.remarks.length > 0) {
          // 	data.buildingsInfo.remarks = data.buildingsInfo.remarks.split('。')
          // }
          this.HouseTypePage.buildingsId = data.buildingsInfo.id;
          this.AgentInfoPage.shopId = data.buildingsInfo.shopId;
          this.TalesPromotionPage.buildingsId = data.buildingsInfo.id;
          this.TalesPromotionPage.shopId = data.buildingsInfo.shopId;
          this.carouselpage.buildingsId = data.buildingsInfo.id;
          this.HousesSalePage.shopId = data.buildingsInfo.shopId;
          this.buildingsNumbers = data.buildingsInfo.buildingsNumbers;
          this.houseTypeNum = data.buildingsInfo.houseTypeNum;
          if (data.buildingsInfo.hasOwnProperty("permit")) {
            data.buildingsInfo.permit = JSON.parse(
              decodeURI(data.buildingsInfo.permit)
            );
          }

          //处理楼盘图片
          let storeyList = this.manageImg(data.buildingsInfo.showImg);
          console.log(storeyList);
          this.storey = data.buildingsInfo;
          this.preSalePermitData = data.sellingLicense;
          this.initMap();
          this.getTalesIssued();
        }
      });
    },
    //添加浏览记录
    saveUserCollection(id) {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.$postHttp("/mob/user/saveUserCollection", {
          userId: user.id,
          type: 2,
          cbType: 5,
          relationId: id
        });
      }
    },
    //户型信息
    getHouseType() {
      this.$getHttp("/mob/user/getHouseType", this.HouseTypePage).then(data => {
        if (data.code == 200) {
          this.HouseTypeList = data.page.list;
          this.HouseTypeTotal = data.page.count;
        }
      });
    },
    //户型介绍
    getHouseTypes() {
      this.$getHttp("/mob/user/getHouseTypeByBuildingId", {
        buildingId: this.$route.query.id
      }).then(data => {
        if (data.code == 200) {
          if (!data.data) {
            return;
          } else {
            console.log(this.typelist, "asdasdsad");

            data.data.forEach(e => {
              this.typelist.push({ num: e.type, name: e.type });
            });
            if (data.data.length >= 4) {
              var temp = this.typelist[2];
              this.typelist[2] = this.typelist[3];
              this.typelist[3] = temp;
            }
          }
        }
      });
    },
    toAgent(id) {
      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: id
        }
      });
    },
    showWeigui(userId) {
      this.bUserId = userId;
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);

      // const routeLink = this.$router.resolve({
      //         path: '/index/inform?userId='+userId
      //       })
      //     window.open(routeLink.href, '_blank')
    },
    //楼盘经纪人信息
    getAgentInfo() {
      this.$getHttp("/mob/user/getAgentInfoList", this.AgentInfoPage).then(
        data => {
          if (data.code == 200) {
            console.log(data);
            this.AgentInfoList = data.page.list;
            this.AgentInfoTotal = data.page.count;
          }
        }
      );
    },
    //楼盘资讯
    getTalesPromotion() {
      // this.$getHttp("/mob/user/getTalesPromotion", this.TalesPromotionPage).then((data) => {
      // 	if (data.code == 200) {
      // 		data.list.forEach((e) =>{
      // 			console.log(this.getTime(e.create_date))
      // 		})
      // 		console.log(data.list)
      // 		this.TalesPromotionList = data.list
      // 		this.TalesPromotionTotal = data.count
      // 	}
      // });

      this.$getHttp("/api/mobile/vehicleOwner/getHelpingFriendsCircle", {
        pageSize: this.TalesPromotionPage.pageSize,
        pageNo: this.TalesPromotionPage.pageNo,
        storeId: this.TalesPromotionPage.shopId,
        userId: localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).id
          : "",
        businessType: 1
      }).then(data => {
        if (data.code == 200) {
          // data.list.forEach((e) => {
          // 	e.image = e.image.split('|')
          // })
          data.helpingFriendsCircle.pageList.forEach(item => {
            item.chage = 0;
            item.picture = item.picture ? item.picture.split("|") : [];
            item.imageList = item.picture
              ? Array.isArray(item.picture)
                ? item.picture
                : item.picture.split("|")
              : [];
            item.video = item.video ? item.video.split("|") : [];
          });
          console.log(data.list);
          this.TalesPromotionList = data.helpingFriendsCircle.pageList;
          this.TalesPromotionTotal = data.helpingFriendsCircle.pageCount;
          // this.articleTotal = data.count
        }
      });
    },
    //楼盘在售房源
    getHousesSale() {
      this.$getHttp("/mob/user/getHousesSale", this.HousesSalePage).then(
        data => {
          if (data.code == 200) {
            console.log(data);
            data.list.forEach(e => {
              e.house_image = e.house_image.split("|")[0];
              //判断该对象是否存在该属性
              if (e.hasOwnProperty("FLOOR")) {
                if (e.FLOOR.indexOf("|") == -1) {
                  e.FLOOR = "";
                } else {
                  e.FLOOR =
                    e.FLOOR.split("|")[0] +
                    "层/" +
                    "共" +
                    e.FLOOR.split("|")[1] +
                    "层";
                }
              }
              // if('FLOOR' in e){
              // 	e.FLOOR = this.floor(e.FLOOR)
              // }
            });
            this.HousesSaleList = data.list;
            this.HousesSaleTotal = data.count;
            console.log(this.HousesSaleList);
          }
        }
      );
    },
    phoneGet() {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.phonestate = !this.phonestate;
      console.log(this.storey);
      this.$postHttp("/mob/user/call", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        telephoneNumber: this.storey.shopPhone,
        associationId: this.storey.id,
        type: "2"
      }).then(res => { });
    },
    //开启聊天
    chat(type, item) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      if (type) {
        this.$refs.chats.chatOpne(this.storey.userId);
      } else {
        this.$refs.chats.chatOpne(item.userId);
      }
    },
    bldetails(id) {
      const routeLink = this.$router.resolve({
        path: "/index/particulars?type=tales&id=" + id
      });
      window.open(routeLink.href, "_blank");
      // this.openUrl({
      //   path: "/index/particulars",
      //   query: {
      // 		id:id,
      // 		type:'tales'
      //   },
      // });
    },
    shopdetails(id) {
      const routeLink = this.$router.resolve({
        path: "/index/ShopDetails?id=" + id
      });
      window.open(routeLink.href, "_blank");
      // this.openUrl({
      //   path: "/index/ShopDetails",
      //   query: {
      //     id: id
      //   }
      // });
    },
    details(item) {
      if (item.transaction_type == 1) {
        const routeLink = this.$router.resolve({
          path: "/index/leaseDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
        // this.openUrl({
        //   path: "/index/leaseDetails",
        //   query: {
        //     id: item.id
        //   }
        // });
      } else {
        const routeLink = this.$router.resolve({
          path: "/index/newHouseDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
        // this.openUrl({
        //   path: "/index/newHouseDetails",
        //   query: {
        //     id: item.id
        //   }
        // });
      }
    },
    getTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      return year + "-" + month + "-" + day;
    },
    //处理图片
    manageImg(imgs) {
      return imgs.split("|");
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层共" + fool[3] + "层";
      if (fool[0] == 3) return "共层" + fool[1] + "层";
    },
    tuXuanClick(type) {
      this.tuXuan = type;
      if (type == 1) {
        this.img = "video";
      } else if (type == 2) {
        this.img = "img";
        this.imgs = this.imgList[0];
        this.thisImg = 0;
      }
    },
    leibieClick(num) {
      this.leibieXuan = num;
      if (num === 1) {
        this.getBuildingsDetail(this.$route.query.id);
        // location.reload()
      }
      switch (num) {
        case 2:
          if (this.HouseTypeList.length > 0) return;
          this.getHouseTypes();
          this.getHouseType();
          break;
        case 3:
          if (this.AgentInfoList.length > 0) return;
          this.getAgentInfo();
          break;
        case 4:
          if (this.TalesPromotionList.length > 0) return;
          this.getTalesPromotion();
          break;
        case 5:
          if (this.HousesSaleList.length > 0) return;
          this.getHousesSale();
          break;
        case 8:
          if (this.recruitData.length > 0) return;
          this.getRecruit();
          break;
      }
    },
    getRecruit() {
      let that = this;
      this.$getHttp("/api/mobile/personnelOwner/getRecruitmentPosition", {
        userId: this.storey.userId,
      }).then((res) => {
        this.recruitData = res.recruitment.pageList;
        this.recruitDataTotal = res.recruitment.pageCount;
      });
    },
    titClick(index) {
      //0 1 2 3 4
      this.HouseTypePage.pageNo = 1;
      if (index == 0) {
        delete this.HouseTypePage.houseType;
        this.getHouseType();
      } else {
        this.HouseTypePage.houseType = index;
        this.getHouseType();
      }
      this.xuanzhong = index;
    },
    currentHouseType(e) {
      this.HouseTypePage.pageNo = e;
      this.getHouseType();
    },
    currentAgentInfo(e) {
      this.AgentInfoPage.pageNo = e;
      this.getAgentInfo();
    },
    jubaoClick() {
      this.$refs.report.jubaoGuan(this.$route.query.id + "|");
    },
    particulars(type, id) {
      this.openUrl({
        path: "/index/particulars",
        query: {
          type: type,
          id: id
        }
      });
    },
    cutImg(type) {
      if (type == 0) {
        if (this.thisImg > 0) {
          this.imgs = this.imgList[this.thisImg - 1];
          this.thisImg = this.thisImg - 1;
        }
      } else {
        if (this.thisImg < this.imgList.length - 1) {
          this.imgs = this.imgList[this.thisImg + 1];
          this.thisImg = this.thisImg + 1;
        }
      }
    },
    // 跳转到销售信息详情页
    information() {
      this.modalBox = !this.modalBox;
    },
    motai() {
      this.modalBox = !this.modalBox;
    },
    tuichu() {
      this.modalBox = !this.modalBox;
    },
    // 获取销售信息详情数据
    getFy() {
      let that = this;
      this.$getHttp("/mob/user/getBuildingsNumber", {
        id: this.$route.query.id
      }).then(res => {
        this.list = res.list;
        console.log(this.list);
        if (this.list.length != 0) {
          this.huxin(this.list[0].house_type);
        }
      });
    },
    huxin(id) {
      this.$getHttp("/mob/user/getBuildingsNumberHouseType", {
        id: id
      }).then(res => {
        res.list.forEach(e => {
          this.typeLiat.forEach(k => {
            if (e.TYPE == k.valueNum) {
              e.TYPE = k.valueName;
            }
          });
        });
        this.huList = res.list;
      });
    },
    getType() {
      let that = this;
      this.$getHttp("/mob/home/getDictionaries", {
        pageNo: 1,
        pageSize: 10,
        type: "16"
      }).then(res => {
        that.typeLiat = res.list;
        this.getFy();
        console.log(this.list, this.huList);
      });
    },
    // 切换
    qiehuan(e) {
      console.log(e);
      let index = e;
      let type = this.list[index].house_type;
      this.huxin(type);
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
  overflow: hidden;
}

.mzsm {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
  width: 97%;
  margin-top: 15px;
  margin-bottom: 30px;
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.particulars {
  position: relative;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;

  .name {
    font-size: 28px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 21px;
  }

  .jubao {
    position: absolute;
    top: -10px;
    right: 20px;
    display: inline-block;
    margin-right: 28px;
    cursor: pointer;

    img {
      width: 30px;
      height: 30px;
    }
  }

  .tu {
    display: inline-block;
    vertical-align: top;

    .datu {
      position: relative;
      width: 600px;
      height: 400px;

      .img {
        width: 600px;
        height: 400px;
      }

      .shangb {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 120px;
        height: 98px;
      }

      .zuo {
        position: absolute;
        color: #fff;
        width: 40px;
        height: 40px;
        top: 180px;
        left: 24px;
        background-color: rgba(51, 51, 51, 0.27);
        border-radius: 50%;
        cursor: pointer;
      }

      /deep/.el-icon-arrow-left:before {
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 30px;
      }

      .you {
        position: absolute;
        color: #fff;
        width: 40px;
        height: 40px;
        top: 180px;
        right: 24px;
        background-color: rgba(51, 51, 51, 0.27);
        border-radius: 50%;
        cursor: pointer;
      }

      /deep/.el-icon-arrow-right:before {
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 30px;
      }
    }

    .xiaotu {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin-top: 24px;
      margin-right: 26px;
      width: 180px;
      height: 120px;
      cursor: pointer;

      img {
        width: 180px;
        height: 120px;
      }

      p {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        background: rgba(51, 51, 51, 0.2);
      }

      .tuXuan {
        background-color: #64b6a8;
      }
    }

    .xiaotu:nth-child(4) {
      margin-right: 0px;
    }
  }

  .wenz {
    display: inline-block;
    vertical-align: top;
    width: 520px;
    height: 400px;
    background: #ffffff;
    // border: 1px solid #e0e0e0;
    margin-left: 24px;
    padding: 0 24px;

    .but {
      margin-top: 32px;

      div {
        position: relative;
        display: inline-block;
        //width: 153px;
        height: 51px;
        border-radius: 4px;
        overflow: hidden;
        text-align: center;
        line-height: 51px;
        text-indent: 50px;
        color: #fff;
        margin-right: 15px;

        img {
          position: absolute;
          width: 33px;
          height: 33px;
          top: 9px;
          left: 25px;
        }
      }

      p {
        margin-left: 10px;
      }

      .but_1 {
        cursor: pointer;
        padding-right: 20px;
        background: rgba(100, 182, 168, 0.14);
        color: #64b6a8;
      }

      .but_2 {
        cursor: pointer;
        padding-right: 20px;
        background: #64b6a8;
      }
    }

    .diz {
      padding: 32px 0;
      border-bottom: 1px solid #e0e0e0;

      div {
        margin-bottom: 22px;

        img {
          width: 28px;
          height: 28px;
        }
      }
    }

    .qian {
      padding-bottom: 36px;
      border-bottom: 1px solid #e0e0e0;

      .p {
        font-size: 32px;
        color: #e00000;
      }

      // div {
      //   display: inline-block;
      //   margin-right: 28px;
      //   cursor: pointer;
      //   img {
      //     width: 30px;
      //     height: 30px;
      //   }
      // }
      // div:nth-child(3) {
      //   margin-right: 0;
      // }
    }

    .huxin {
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 30px;

      div {
        margin-top: 30px;
        display: inline-block;

        .p1 {
          font-size: 26px;
          color: #333;
          margin-bottom: 8px;
        }

        .p2 {
          font-size: 16px;
          color: #666;
        }
      }
    }

    .mingpai {
      margin-top: 44px;

      div {
        img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-right: 14px;
        }

        span {
          display: inline-block;
          vertical-align: middle;
          font-size: 18px;
          color: #333333;
          margin-right: 14px;
        }

        .biaoqin {
          /* width: 72px; */
          height: 24px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 24px;
          font-size: 14px;
          color: #64b6a8;
          padding: 0 4px;
        }
      }
    }
  }

  .leibie {
    margin-top: 40px;

    div {
      display: inline-block;
      width: 108px;
      height: 40px;
      line-height: 40px;
      background: rgba(242, 242, 242, 0.39);
      border-radius: 4px;
      font-size: 20px;
      text-align: center;
      margin-right: 16px;
      cursor: pointer;
    }

    .xuan {
      color: #fff;
      background: #64b6a8;
    }
  }

  .xinxi {
    margin-top: 32px;

    .fangyuan {
      font-size: 24px;
      color: #333333;
      margin-bottom: 18px;
    }

    .guig {
      margin-bottom: 15px;

      p {
        display: inline-block;
        width: 390px;
        font-size: 20px;
      }
    }
  }

  .xuke {
    margin-top: 40px;
    margin-bottom: 48px;

    .jies {
      width: 1200px;
      font-size: 24px;
      color: #000000;
      margin-bottom: 17px;
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 15px;
    }

    .list {
      width: 1200px;
      margin-top: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #d0d0d0;
    }

    .li {
      margin-bottom: 8px;
      font-size: 20px;
    }
  }

  .jieshao {
    margin-top: 40px;
    margin-bottom: 48px;

    .jies {
      font-size: 24px;
      color: #000000;
      margin-bottom: 17px;
    }

    .li {
      margin-bottom: 8px;
      font-size: 20px;
    }
  }
}

.tit {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 30px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      width: 400px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;
      vertical-align: middle;

      input {
        width: 320px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }
  }
}

.titLiat {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;

  .li {
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
    color: #333;
    cursor: pointer;

    p {
      font-size: 20px;
    }

    img {
      width: 32px;
      height: 16px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: -8px;
    }
  }

  .cur {
    color: #64b6a8;
    border: 0;
    transform: scale(1.1);
  }
}

.list2 {
  .li {
    box-sizing: border-box;
    display: inline-block;
    width: 290px;
    margin-right: 13px;
    border: 1px solid #d0d0d0;
    margin-top: 16px;

    img {
      width: 100%;
      height: 194px;
    }

    .wenzi {
      box-sizing: border-box;
      border-top: 1px solid #d0d0d0;
      padding-left: 24px;
      height: 183px;

      .p1 {
        margin-top: 12px;
        font-size: 26px;
        font-weight: 600;
        color: #333;
      }

      .p2,
      .p3 {
        margin-top: 10px;
        font-size: 18px;
        color: #666;
      }

      .p4 {
        margin-top: 15px;
        font-size: 28px;
        font-weight: 600;
        color: red;
      }
    }
  }

  .li:nth-child(4n) {
    margin-right: 0px;
  }
}

.list3 {
  margin-top: 30px;

  .li {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin-right: 13px;
    width: 290px;
    height: 384px;
    border: 1px solid #d0d0d0;
    margin-bottom: 15px;
    padding-left: 15px;

    .touxiang {
      width: 144px;
      height: 180px;
      margin-top: 14px;
      margin-left: 58px;
    }

    .name {
      width: 100%;
      text-align: center;
      font-size: 17px;
      color: #333333;
      margin-top: 11px;
      font-weight: 400;
    }

    .pingfen {
      margin-top: 15px;

      div {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        margin-left: 33px;
        margin-right: 15px;
      }

      img {
        vertical-align: middle;
        width: 26px;
        height: 26px;
        margin-right: 3px;
      }
    }

    .weigui {
      margin-top: 19px;

      .wei {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        margin-left: 33px;
        cursor: pointer;

        span {
          vertical-align: middle;
          margin-right: 10px;
        }
      }

      img {
        vertical-align: middle;
        width: 25px;
        height: 25px;
        margin-right: 6px;
        cursor: pointer;
      }
    }

    .xian {
      position: absolute;
      left: -1px;
      bottom: -1px;
      width: 290px;
      height: 9px;
      background-color: #64b6a8;
    }
  }

  .li:nth-child(4n) {
    margin-right: 0px;
  }

  .lixuan {
    opacity: 0.4;
    cursor: pointer;
  }
}

.list4 {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;

  .li {
    position: relative;
    margin-bottom: 32px;

    .img {
      width: 300px;
      height: 200px;
    }

    .wenzi {
      display: inline-block;
      vertical-align: top;
      width: 876px;
      height: 154px;
      margin-left: 14px;

      .p1 {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .p6 {
        position: absolute;
        bottom: 0;
        color: #333333;

        span {
          font-size: 20px;
          display: block;
          margin-top: 10px;
        }
      }
    }
  }
}

.list5 {
  width: 100%;
  margin-top: 30px;

  .li {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;

    .biao {
      width: 300px;
      height: 200px;
    }

    .duibi {
      position: absolute;
      width: 300px;
      height: 200px;
      top: 0;
      left: 0;
      background-color: rgba(51, 51, 51, 0.64);
      cursor: pointer;

      p {
        position: absolute;
        width: 130px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 24px;
        color: #fff;
        border: 2px solid #ffffff;
        font-size: 21px;
      }
    }

    .name {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;
      font-size: 24px;
      font-weight: 400;
      margin-top: 0px;
      margin-bottom: 0px;

      .t_1 {
        position: relative;
        font-size: 26px;
        cursor: pointer;
        padding-bottom: 12px;

        .t_1_1 {
          position: absolute;
          width: 130px;
          height: 58px;
          top: 30px;
          right: -90px;

          img {
            width: 100%;
          }
        }
      }

      .t_2 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_3 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_4 {
        position: absolute;
        font-size: 18px;
        color: #666666;
        bottom: 0;
        left: 0;

        img {
          width: 31px;
          height: 31px;
          border-radius: 31px;
        }

        div {
          display: inline-block;
          // width: 90px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 30px;
          margin-left: 24px;
          color: #64b6a8;
        }
      }
    }

    .qian {
      position: absolute;
      top: 62px;
      right: 0;
      width: 170px;

      .p1 {
        width: 100%;
        font-size: 32px;
        color: #e00000;
        text-align: center;
        margin-bottom: 10px;
      }

      .p2 {
        width: 100%;
        font-size: 18px;
        color: #333333;
        text-align: center;
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.salesMessage {
  width: 100%;
  padding-bottom: 20px;
  margin-top: 40px;

  .title {
    font-size: 24px;
    color: #333333;
    margin-bottom: 18px;
    font-weight: normal;
  }

  .xian_x {
    border-bottom: 1px solid #ccc;
  }

  .salesData {
    display: flex;
    justify-content: space-between;
    padding-right: 50px;
    align-items: center;
    height: 10vh;
    cursor: pointer;

    .rightImg {
      width: 10px;
    }

    .list {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
}

.modalBox {
  // font-size: 20em;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  font-size: 16px;

  .informations {
    width: 35%;
    height: 80vh;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .top {
      width: 100%;
      height: 6vh;
      background-color: rgb(100, 182, 168);
      font-size: 20px;
      line-height: 6vh;
      text-align: center;
      position: relative;

      .tuichu {
        position: absolute;
        right: 20px;
        cursor: pointer;
      }
    }

    .content {
      width: 100%;
      margin-top: 32px;
      height: 100%;

      .list {
        .li {
          position: relative;
          box-sizing: border-box;
          display: inline-block;
          padding-top: 80px;
          padding-left: 52px;
          width: 100%;
          height: 100%;
          border: 2px solid #e5e5e5;
          border-radius: 10px;
          margin-right: 24px;
          color: #000000;

          .hao {
            position: absolute;
            top: -2px;
            left: -2px;
            width: 166px;
            height: 68px;
            line-height: 68px;
            text-align: center;
            border-radius: 10px 0 10px 0;
            background-color: #64b6a8;
            color: #fff;
            font-size: 30px;
          }

          p {
            display: inline-block;
            width: 280px;
            margin-bottom: 10px;
            font-size: 24px;
          }
        }
      }
    }

    .huxing {
      margin-left: 36px;
      padding-top: 20px;

      .name {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        margin-top: 40px;
        margin-bottom: 24px;
      }

      .list {
        overflow: auto;
        height: 300px;

        img {
          width: 300px;
          height: 200px;
        }

        .lis {
          position: relative;
          box-sizing: border-box;
          display: inline-block;
          padding-top: 10px;
          padding-left: 10px;
          width: 600px;
          height: 250px;
          border: 2px solid #e5e5e5;
          border-radius: 10px;
          margin-right: 24px;
          color: #000000;
          display: flex;
          justify-content: space-between;

          .wenzi {
            position: relative;
            display: inline-block;
            vertical-align: top;
            margin-left: 24px;
            height: 120px;
            margin-bottom: 28px;
            width: 45%;

            .p1 {
              font-size: 14px;
              color: #333;
              font-weight: 600;
              margin-bottom: 10px;
            }

            .p2 {
              font-size: 14px;
              color: #666;
              font-weight: 400;
              margin-bottom: 10px;
            }

            .p3 {
              position: absolute;
              bottom: 0;
              left: 0;
              margin-bottom: 0px;
            }
          }
        }
      }
    }

    .box {
      position: absolute;
      width: 100%;
      // padding-bottom: 100px;
      top: 0;
      bottom: 0;
      background-color: #fff;
    }

    .tou {
      position: relative;
      width: 100%;
      // height: 88px;
      text-align: center;
      line-height: 88px;
      font-size: 36px;
      color: #fff;
      background-color: #64b6a8;

      .image1 {
        position: absolute;
        width: 32px;
        height: 32px;
        // top: 116px;
        left: 30px;
      }

      .image2 {
        position: absolute;
        width: 56px;
        height: 56px;
        // top: 104px;
        right: 30px;
      }
    }
  }
}
</style>
